<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="../../0908/css/reset.css" />
  <style>
    .w {
      width: 1226px;
      margin: 0 auto;
    }

    .goodsList li {
      width: 230px;
      float: left;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #333;
      margin-left: 10px;
      margin-bottom: 10px;
    }

    .goodsList li img {
      width: 80%;
      display: block;
      margin: 0 auto;
    }

    .title {
      font-size: 14px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price {
      line-height: 32px;
      font-size: 14px;
      color: #e33333;
    }
  </style>
</head>

<body>
  <ul class="goodsList w cl">
    <!-- <li>
          <a href="">
              <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
              <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
              <div class="price">￥ 3199.00 </div>
          </a>
      </li>
      <li>
          <a href="">
              <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
              <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
              <div class="price">￥ 3199.00 </div>
          </a>
      </li>
      <li>
          <a href="">
              <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
              <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
              <div class="price">￥ 3199.00 </div>
          </a>
      </li>
      <li>
          <a href="">
              <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
              <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
              <div class="price">￥ 3199.00 </div>
          </a>
      </li>
      <li>
          <a href="">
              <img src="https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/201204/13/5704/79299/613748c7E58f768df/918ac8921e3bdfe9.jpg.webp" alt="">
              <div class="title">一加 OnePlus 9R 5G 120Hz 柔性屏12GB+256GB 黑岛 骁龙870 65W快充 专业游戏配置 超大广角拍照手机</div>
              <div class="price">￥ 3199.00 </div>
          </a>
      </li> -->
  </ul>
</body>
<script>
  // 京东商品列表接口   

  // https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=17_2980_0_0&source=pc-home&callback=jsonpMore2Goods&_=1631781864760
  // 参数:
  // page: 页码
  // pagesize: 页面多少条
  // callback: 自定义接口返回的回调函数名

  // 数据
  // var result = {
  // 	success:true,
  // 	data: [{
  // 		target_url: 跳转地址,
  // 		t:商品描述,
  // 		op: 现价,
  // 		jp: 原价,
  // 		img:"https://img10.360buyimg.com/jdcms/s300x300_" + img
  // 	}, {

  // 	}],
  var ul = document.getElementsByClassName("goodsList")[0];


  function fn(result) {
    console.log(result);
    var { data: list } = result;
    console.log(list);
    var html = "";
    list.forEach(function (item) {
      // console.log(item);
      // var goodsMsg = item.goodsMsg;
      var { t, op, jp, img, target_url } = item;
      html += `<li> 
                  <a href="http://${target_url}">
                      <img src="https://img10.360buyimg.com/jdcms/s300x300_${img}" alt="">
                      <div class="title">${t}</div>
                      <div class="price">￥ ${op} </div>
                      <div class="price">￥ ${jp} </div>
                  </a>
              </li>`;
    })
    ul.innerHTML = html;
  }
</script>
<script
  src="https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=17_2980_0_0&source=pc-home&callback=fn&_=1631781864760"></script>

</html>